{extend name="common/base" /}
{block name="body"} 
<main>
    <!-- 订单 -->
    <div class="container order-info">
        <div class="confirm-box">
            <h1 class="order-title main-font">Confirm the payment</h1>
            <p class="main-font">
                Is your product insured？would you like it in sure you selection？
                <a href="#">read more</a>
            </p>
            <ul class="layui-row layui-col-space30">
                {if count($list)} 
                    {volist name="list" id="cart"} 
                    <li class="layui-col-md3 layui-col-xs6 shopping-cart-item" data-cartid="{$cart.id}" data-price="{$cart.specs.price_selling}" data-quantity="{$cart.number|default=1}">
                        <div class="order-goods-item">
                            <img src="{$cart.goods.cover}" alt="">
                            <p class="order-goods-name" style="margin-bottom: 10px;">{$cart.goods.name}</p>
                            <div class="order-goods-type layui-row">
                                <div class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font" style="width: 120px;"><span>color:</span>{$cart.spec['颜色']}</p>
                                    <p class="main-font"><span>size:</span>{$cart.spec['尺码']}</p>
                                </div>
                                <div class="layui-form layui-col-md6 layui-col-xs12">
                                    <input class="checkbox-style select-item" lay-filter="cartCheckbox" type="checkbox" name="selectItem" checked>
                                </div>
                            </div>
                        </div>
                    </li>
                    {/volist} 
                {/if}
            </ul>
        </div>

        <!-- 发货方式 -->
        <div class="delivery-method main-font">
            <h1 class="order-goods-title">Delivery method</h1>
            <div class="layui-tab top-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this delivery_type" data-type="1">
                        <p>
                            Direct delivery, offline payment (Melbourne only now)
                        </p>
                    </li>
                    <li class="delivery_type" data-type="2">
                        <p>
                            <span>express post delivery</span> (Depending on the distance)
                        </p>
                    </li>
                </ul>
                <input type="hidden" id="delivery_type" value="1">
                <div class="layui-tab-content">
                    <!-- Tab 1 -->
                    <div class="layui-tab-item layui-show">
                        <form>
                            <ul class="layui-row layui-col-space20 order_form">
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">First Name*:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.first_name|default=''}" id="first_name">
                                    </div>
                                </li>
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">Last Name*:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.last_name|default=''}" id="last_name">
                                    </div>
                                </li>
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">Email Address*:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.email|default=''}" id="email">
                                    </div>
                                </li>
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">Phone Number*:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.phone|default=''}" id="phone">
                                    </div>
                                </li>
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">Country:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.state|default=''}" id="state">
                                    </div>
                                </li>
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">Street Address:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.street|default=''}" id="street">
                                    </div>
                                </li>
                            </ul>
                        </form>
                    </div>

                    <!-- Tab 2 -->
                    <div class="layui-tab-item">
                        <form>
                            <ul class="layui-row layui-col-space20 order_form">
                                <!-- 同样的表单结构 -->
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">First Name*:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.first_name|default=''}" id="first_name_tab2">
                                    </div>
                                </li>
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">Last Name*:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.last_name|default=''}" id="last_name_tab2">
                                    </div>
                                </li>
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">Email Address*:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.email|default=''}" id="email">
                                    </div>
                                </li>
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">Phone Number*:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.phone|default=''}" id="phone">
                                    </div>
                                </li>
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">Country:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.state|default=''}" id="state">
                                    </div>
                                </li>
                                <li class="layui-col-md6 layui-col-xs12">
                                    <p class="main-font">Street Address:</p>
                                    <div class="code-input">
                                        <input type="text" value="{$user_info.street|default=''}" id="street">
                                    </div>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 优惠码 -->
        <div class="nove-discound-code main-font">
            <h1 class="order-goods-title">Nove discound code</h1>
            <p class="main-font">Code:</p>
            <div class="code-input">
                <input type="text" id="discount_code">
            </div>
        </div>

        <!-- 支付方式 -->
        <div class="payment-method main-font">
            <h1 class="order-goods-title">Payment method</h1>
            <div class="layui-tab payment-method-tab-img">
                <ul class="layui-tab-title layui-row layui-col-space30">
                    <li class="layui-this layui-col-md2 layui-col-xs6 pay_type" data-type="1">
                        <div class="order-img order-apple-pay-img">
                            <div class="order-img-contain">
                                <img src="__ROOT__/static/images/order-apple-pay.png" alt="">
                            </div>
                        </div>
                        <p class="main-font">Apple pay</p>
                    </li>
                    <li class="layui-col-md2 layui-col-xs6 pay_type" data-type="2">
                        <div class="order-img order-card-img">
                            <div class="order-img-contain">
                                <img src="__ROOT__/static/images/order-card.png" alt="">
                            </div>
                        </div>
                        <p class="main-font">Card</p>
                    </li>
                    <li class="layui-col-md2 layui-col-xs6 pay_type" data-type="3">
                        <div class="order-img order-vip-card-img">
                            <div class="order-img-contain">
                                <img src="__ROOT__/static/images/order-vip-card.png" alt="">
                            </div>
                        </div>
                        <p class="main-font">Membership card</p>
                    </li>
                </ul>
                <input type="hidden" id="pay_type" value="1">
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show"></div>
                    <div class="layui-tab-item">
                        <div class="paypal_box paypal_box1 ">
                            <ul class="layui-row layui-col-space30">
                                <li class="layui-col-md12 layui-col-xs12">
                                    <label class="personal-label" for="unit number，street">Card Number:</label>
                                    <!-- <p class="personal-value">34A3333333333333</p> -->
                                    <div class="input-style">
                                        <input type="text" value="" name="card_number" id="card_number">
                                    </div>
                                </li>
                                <li class="layui-col-md12 layui-col-xs12">
                                    <label class="personal-label" for="city-suburb">Expiration Date:</label>
                                    <!-- <p class="personal-value">2024-9-9</p> -->
                                    <div class="input-style">
                                        <input value="" id="date">
                                    </div>
                                </li>
                                <li class="layui-col-md12 layui-col-xs12">
                                    <label class="personal-label" for="description">Security Code:</label>
                                    <!-- <p class="personal-value">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> -->
                                    <div class="input-style">
                                        <input type="text" value="" name="security_code" id="security_code">
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="layui-tab-item"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 总计 -->
    <div class="container order-price">
        <ul class="layui-row">
            <li class="layui-col-md6 layui-col-xs12 order-price-left">
                <div class="order-price-left-button">
                    <img src="__ROOT__/static/images/order-crown.png" alt="">
                    <span class="main-font">Join as a member to enjoy discounts</span>
                    <a href="#">Add Member</a>
                </div>
            </li>
            <li class="layui-col-md6 layui-col-xs12 order-price-right">
                <ul class="order-price-right-info">
                    <li class="main-font">
                        <span class="total-name">You total:</span>
                        <span class="total-number total-amount">0</span>
                    </li>
                    <li class="main-font">
                        <span class="total-name">Discout:</span>
                        <span class="total-number">0</span>
                    </li>
                    <li class="main-font">
                        <span class="total-name">Items:</span>
                        <span class="total-number  selected-count">0</span>
                    </li>
                    <li class="main-font">
                        <span class="total-name">Inswace:</span>
                        <span class="total-number">0</span>
                    </li>
                    <li class="main-font">
                        <span class="total-name">Shipon:</span>
                        <span class="total-number">0</span>
                    </li>
                    <li class="main-font">
                        <span class="total-name">Total:</span>
                        <span class="total-number total-amount">0</span>
                    </li>
                </ul>
                <div class="color-button immediate-payments">Immediate payment</div>
            </li>
        </ul>
    </div>
</main>

<div class="success-popup">
    <div>
        <h1>Thank you for shopping with us </h1>
        <p>Expected delivery time: <span>Same day -2 days</span></p>
        <img class="thanks-close" src="__ROOT__/static/images/thanks-page-close.png" alt="">
    </div>
</div>
{/block}

{block name="js"} 
<script>
    $(document).ready(function () {
    
        // 初始化 layui 表单组件
        layui.use(['form'], function () {
            const form = layui.form;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#date'
            });
            // 全选/取消全选
            form.on('checkbox(selectAll)', function (data) {
                // 如果全选框被选中
                const isChecked = data.elem.checked;
                $('.select-item').prop('checked', isChecked);
                form.render('checkbox'); // 重新渲染 checkbox
                updateSummary(); // 全选时立即更新总金额和数量
            });

            // 单个商品的选择框变化
            form.on('checkbox(cartCheckbox)', function (data) {
                // 检查所有复选框是否都已选择
                const allChecked = $('.select-item').length === $('.select-item:checked').length;
                $('.select-all').prop('checked', allChecked);
                form.render('checkbox'); // 重新渲染 checkbox
                updateSummary(); // 选择变化时更新总金额和数量
            });

            // 页面加载时默认更新
            updateSummary(); // 页面加载后，初始化时调用一次
        });

        // 更新总价和数量
        function updateSummary() {
            let totalAmount = 0;
            let selectedCount = 0;

            // 遍历每个购物车项，计算总金额和数量
            $('.shopping-cart-item').each(function () {
                const $item = $(this);
                const isSelected = $item.find('.select-item').prop('checked');
                const price = parseFloat($item.data('price'));
                const quantity = parseInt($item.data('quantity'));

                if (isSelected) {
                    totalAmount += price * quantity;
                    selectedCount += quantity;
                }
            });
                
            // 更新显示的已选择数量和总金额
            $('.selected-count').text(selectedCount);
            $('.total-amount').text(totalAmount.toFixed(2));
        }

        $('.delivery_type').on('click', function () {
            // 获取发货方式
            const type = $(this).data('type');
            $('#delivery_type').val(type);
        });

        $('.pay_type').on('click', function () {
            // 获取支付方式
            const type = $(this).data('type');
            $('#pay_type').val(type);
        });

        // 提交订单按钮
        $('.immediate-payments').click(function () {
            // 获取选中的商品 cart_id
            const selectedItems = $('.shopping-cart-item input[type="checkbox"]:checked');
            if (selectedItems.length === 0) {
                layer.msg('Please select at least one product!', { icon: 2 });
                return;
            }

            const cart_ids = [];
            selectedItems.each(function () {
                const cartId = $(this).closest('.shopping-cart-item').data('cartid');
                if (cartId) {
                    cart_ids.push(cartId);
                }
            });

            // 获取用户信息
            const firstName = $('#first_name').val().trim();
            const lastName = $('#last_name').val().trim();
            const email = $('#email').val().trim();
            const phone = $('#phone').val().trim();
            const country = $('#state').val().trim();
            const street = $('#street').val().trim();

            // 收货信息校验
            if (!firstName || !lastName || !email || !phone || !country || !street) {
                layer.msg('Please fill in all the required shipping information!', { icon: 2 });
                return;
            }

            // 获取支付方式
            const paymentType = $('#pay_type').val(); // 支付方式
            let cardNumber = '';
            let expirationDate = '';
            let securityCode = '';
            if (paymentType == 2) { // 信用卡支付时需校验卡信息
                 cardNumber = $('#card_number').val().trim();
                 expirationDate = $('#date').val().trim();
                 securityCode = $('#security_code').val().trim();
                if (!cardNumber || !expirationDate || !securityCode) {
                    layer.msg('Please Fill In All The Required Credit Card Information!', { icon: 2 });
                    return;
                }
            }

            // 获取配送方式
            const deliveryType = $('#delivery_type').val();

            // 获取优惠码
            const discountCode = $('#discount_code').val().trim();

            // 构造提交数据
            const orderData = {
                cart_ids: cart_ids.join(','), // 拼接为 1,2,3 这样的字符串
                paymentType: paymentType,
                deliveryType: deliveryType,
                discountCode: discountCode,
                firstName: firstName,
                lastName: lastName,
                email: email,
                phone: phone,
                country: country,
                street: street,
                cardNumber :cardNumber,
                expirationDate : expirationDate,
                securityCode : securityCode

            };

            // 提交订单
            ajaxRequest('/submit_order', orderData, 'POST', this, function (response) {
                if (response.code == 1) {
                    layer.msg('Order placed successfully!', { icon: 1 });
                    $('.success-popup').css('display', 'block');
		            $('body').css('overflow', 'hidden');
                    setTimeout(() => {
                        window.location.href = '/personal-info'; // 跳转到订单成功页面
                    }, 1500);
                } else {
                    layer.msg(response.message || 'Failed to place the order!', { icon: 2 });
                }
            });
        });

    });

</script>
{/block}
 